//canvas对象和上下文
var canvasElement,canvasContext,
//分数对应的点的坐标的数组
    scorePointArray,
    //背景和同心圆相关参数
    canvaseSide,mapRadius=120,arcXPoint,arcYPoint,
    //六边形相关参数
    sideL,sideOffset,scoreMax=255,
    //六边形的六个点
    pointArray;
//六个维度的得分
var scoreArray;
var scoreTextFont="30px Arial";
var scoreValueFont="24px 黑体";
//更合理的分数上限开关,默认关闭
var switchMoreReasonableScoreMax=false;
//设置得分上限
function setScoreMax(inputScoreMax){
    scoreMax=inputScoreMax;
}
//设置得分词条的font样式
function setScoreTextFont(inputScoreTextFont){
    scoreTextFont=inputScoreTextFont;
}
//设置得分数值的font样式
function setScoreValueFont(inputScoreValueFont){
    scoreValueFont=inputScoreValueFont;
}
//设置能力图半径
function setMapRadius(inputMapRadius){
    mapRadius=inputMapRadius;
}
//设置能力
function setScoreArray(inputScoreArray)
{
    scoreArray=inputScoreArray;
}
//设置画布选择器
function setCanvasElement(selector)
{
//获取画布对象
canvasElement=document.querySelector(selector);
canvasContext=canvasElement.getContext("2d");
}
//更合理的分数上限
function moreReasonableScoreMax(){
    let nowScoreMax=scoreArray[0].score;
    for(let i=1;i<6;i++){
        if(scoreArray[i].score>nowScoreMax)
        {
            nowScoreMax=scoreArray[i].score;
        }
    }
    scoreMax=nowScoreMax+10;
}
//MoreReasonableScoreMax的缩写
function MRScoreMax(){
    if(switchMoreReasonableScoreMax) {
        scoreMax = 255;
    }
    switchMoreReasonableScoreMax=!switchMoreReasonableScoreMax;
}
//初始化
function competencyMapInit(){
    //更合理的分数最大值
    if(switchMoreReasonableScoreMax){
    moreReasonableScoreMax();
    }
    //背景和同心圆相关参数
canvaseSide=canvasElement.width;//画布大小，width和height都可以
arcXPoint=canvaseSide/2;//圆心x坐标
arcYPoint=canvaseSide/2;//圆心y坐标
//六边形相关参数
sideL = mapRadius; //六边形边长（与最大同心圆半径同长，你们可以自己算下）
sideOffset=sideL/2;//边长的一半
//定义六边形的6个点
pointArray = [{
    "x": arcXPoint,//最上边的点
    "y": arcYPoint-sideL
}, {
    "x": arcXPoint+sideL, //右上角的点
    "y": arcYPoint-sideOffset
}, {
    "x": arcXPoint+sideL,
    "y": arcYPoint+sideOffset 
}, {
    "x": arcXPoint,//最下边的点
    "y": arcYPoint+sideL
}, {
    "x": arcXPoint-sideL,
    "y": arcYPoint+sideOffset
}, {
    "x": arcXPoint-sideL,
    "y": arcYPoint-sideOffset
}];
}
//计算得出分数对应的点坐标
function getScorePointArray(){
    return [{
    "x": arcXPoint,//最上边的点
    "y": arcYPoint-(sideL*scoreArray[0].score/scoreMax)
}, {
    "x": arcXPoint+(sideL*scoreArray[1].score/scoreMax), //右上角的点
    "y": arcYPoint-(sideOffset*scoreArray[1].score/scoreMax)
}, {
    "x": arcXPoint+(sideL*scoreArray[2].score/scoreMax),
    "y": arcYPoint+(sideOffset*scoreArray[2].score/scoreMax)
}, {
    "x": arcXPoint,//最下边的点
    "y": arcYPoint+(sideL*scoreArray[3].score/scoreMax)
}, {
    "x": arcXPoint-(sideL*scoreArray[4].score/scoreMax),
    "y": arcYPoint+(sideOffset*scoreArray[4].score/scoreMax)
}, {
    "x": arcXPoint-(sideL*scoreArray[5].score/scoreMax),
    "y": arcYPoint-(sideOffset*scoreArray[5].score/scoreMax)
}];
}
//绘制能力图
function competencyMapShow(){
    competencyMapInit();
    //清空画布
    canvasContext.clearRect(0,0,canvasElement.width,canvasElement.height);
    scorePointArray=getScorePointArray();
    //开始绘画路径
    canvasContext.beginPath();
    //绘制背景，背景的颜色
    canvasContext.fillStyle = "#424b67";
    //线的粗细
    canvasContext.lineWidth=4;
    canvasContext.moveTo(pointArray[0].x, pointArray[0].y);
    for (let i = 1; i < pointArray.length; i++) {
        var point = pointArray[i];
        canvasContext.lineTo(point.x, point.y);
    }
    //填充背景
    canvasContext.fill();
    //线的颜色
    canvasContext.strokeStyle = "#69708a";
    //绘制连线，画出1-4,2-5,3-6 六边形顶点的连线
    for (var i = 0; i < 3; i++) {
        var startPoint = pointArray[i],
            endPoint = pointArray[i + 3];
            canvasContext.moveTo(startPoint.x, startPoint.y);
            canvasContext.lineTo(endPoint.x, endPoint.y);
    }
    canvasContext.closePath();
    canvasContext.stroke();
    canvasContext.beginPath();
    canvasContext.strokeStyle = "#FFFFFF";
    canvasContext.lineWidth=4;
    canvasContext.moveTo(pointArray[0].x, pointArray[0].y);
    for (let i = 1; i < pointArray.length; i++) {
        var point = pointArray[i];
        canvasContext.lineTo(point.x, point.y);
    }
    canvasContext.closePath();
    canvasContext.stroke();
    //可以获取字符串宽度
    // canvasContext.measureText(text).width; 
    //绘制文本信息
    canvasContext.font=scoreTextFont;
    canvasContext.fillStyle="#c6b95b";
    canvasContext.textAlign = 'center'; // 文本水平居中  
    canvasContext.textBaseline = 'middle'; // 文本垂直居中
    //绘制词条
    for(let i=0;i<6;i++)
    {
        if(i==5 || i<2){
            canvasContext.fillText(scoreArray[i].type,pointArray[i].x,pointArray[i].y-45)
        }else{
            canvasContext.fillText(scoreArray[i].type,pointArray[i].x,pointArray[i].y+35)
        }
    }
    //绘制词条对应的数值
    canvasContext.font=scoreValueFont;
    canvasContext.fillStyle="#c7c7c0";
    for(let i=0;i<6;i++)
    {
        if(i==5 || i<2){
            canvasContext.fillText(scoreArray[i].score,pointArray[i].x,pointArray[i].y-20)
        }else{
            canvasContext.fillText(scoreArray[i].score,pointArray[i].x,pointArray[i].y+60)
        }
    }
    //开始绘画路径,绘制内部能力图
    canvasContext.beginPath();
    //绘制小六边形
    canvasContext.fillStyle = "#7bb0e4";
    canvasContext.moveTo(scorePointArray[0].x, scorePointArray[0].y);
    for (let i = 1; i < scorePointArray.length; i++) {
        var point = scorePointArray[i];
        canvasContext.lineTo(point.x, point.y);
    }
    canvasContext.globalAlpha = 0.8;  
    canvasContext.fill();
    canvasContext.globalAlpha = 1;  
    canvasContext.closePath();
}